<template>
  <div class="bigbox" v-for="item in Share" :key="item.id">
    <!-- 左侧 -->
    <div :class="type == '3' ? 'left-type' : 'left'">
      <div class="title"><span>乐谱标题：</span>
        <h3>{{ item.title }}</h3>
      </div>
      <div class="type-there" v-if="type == '3'"><span>最后一次编辑时间</span>
        <p>{{ item.lastEditTime }}</p>
      </div>
      <div :class="type == '1' ? 'active' : 'left-top'" v-if="type != '3'">
        <div v-if="type == '2'"><span class="left-unify">分享位置</span><p>{{ item.SharePotion }}</p></div>
        <div v-else class="event" @click="UserDetail(item)"><span class="left-unify">作者</span><p>{{ item.author }}</p></div>
        <div><span class="left-unify">分享时间</span><p>{{ item.ShareTime }}</p></div>
        <div><span class="left-unify">分享老师</span><p>{{ item.teacher }}</p></div>
      </div>

      <div class="left-bottom" v-if="type != '3'">
        <div><span class="iconfont icon-dianzan" style="font-size: 20px" @click="addLike(item)"></span>
          <p style="opacity: 0.5">{{ item.like }}</p>
        </div>
        <div><span class="span-one">评论({{ item.comment }})：</span><span v-if="userA.subject"
            class="iconfont icon-plus-full" style="font-size: 25px" @click="PopUpBox(item)"></span></div>
      </div>
      <div class="left-comments" v-for="item1 in item.commentList" :key="item.id" v-if="type != '3'">
        <div class="span-one">{{ item1.fromName }}</div>
        <div><el-rate v-model="item1.rate" disabled /></div>
        <p class="Comments">{{ item1.comment }}</p>
        <span class="iconfont icon-cuohao" v-if="item1.fromName==userA.nickname" @click="delCommit(item1,item.id)"></span>
      </div>
    </div>
    <div class="right">
      <div class="right-box">
        <div class="right-header">
          <span @click="switchingdata(item)">
            <span v-if="item.play" class="iconfont icon-kaishi1" style="font-size: 40px"></span>
            <span class="iconfont icon-zanting" v-else></span>
          </span>
          <span class="iconfont icon-jieshu" style="font-size: 40px;"></span>
          <!-- 右侧分享 -->
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="userA.subject && type == '1'"
            @click="Sharea(item)"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="userA.subject && type == '2'"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="type == '3' && item.author == userA.name"
            @click="Sharea(item)"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="type == '3' && item.author == userA.nickname"
            @click="Sharea(item)"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="type == '4' && userA.subject"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="type == '5' && userA.subject"></span>
          <span class="iconfont icon-xiaofeiji" style="font-size: 40px;" v-if="type == '6' && userA.subject"
            @click="Sharea(item)"></span>
          <!-- 右侧删除 -->
          <span class="iconfont icon-shanchu" style="font-size: 36px;" v-if="type == '1' && item.author == userA.nickname"
            @click="delShare(item)"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;" v-if="type == '1' && item.author == userA.name"
            @click="delShare(item)"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;" v-if="type == '3' && item.author == userA.name"
            @click="delShare(item)"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;" v-if="type == '3' && item.author == userA.nickname"
            @click="delShare(item)"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;"
            v-if="type == '2' && item.teacher == userA.nickname || item.teacher == userA.name"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;"
            v-if="type == '4' && item.teacher == userA.nickname || item.teacher == userA.name"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;"
            v-if="type == '5' && item.teacher == userA.nickname || item.teacher == userA.name"></span>
          <span class="iconfont icon-shanchu" style="font-size: 36px;"
            v-if="type == '6' && item.teacher == userA.nickname || item.teacher == userA.name" @click="delShare(item)"></span>
          <!-- 移动 -->
          <span class="move" v-if="type == '3' && item.author == userA.name">移动</span>
          <span class="move" v-if="type == '3' && item.author == userA.nickname">移动</span>
          <span class="move" v-if="type == '6' && !userA.EditeScore">移动</span>

        </div>

        <div style="margin-bottom: 20px;margin-top: 10px;">
          <audio ref="audioElement" controls>
            <source :src="item.music">
          </audio>
        </div>

        <!-- {{type}} -->
      </div>
    </div>

    <!-- 评论弹出框 -->
    <div class="popup-box" v-show="item.isShow">
      <div class="popup-rate"><el-rate v-model="AddRate" /></div>
      <div class="popup-input">
        <input type="text" placeholder="请输入评论" v-model="AddComment" />
      </div>

      <div @click="submit(item)" class="popup-btn">确定</div>
    </div>

<!-- 老师分享弹出框 -->
<div>
    <el-dialog v-model="dialogFormVisible" title="分享" width="500">
    <el-form>
        <el-form-item>
           <el-select placeholder="请选择分享的位置" v-model="location">
          <el-option-group
      v-for="group in position"
      :key="group.label"
      :label="group.label"
    >
      <el-option
      v-for="item in group.options" :key="item.id"
        :label="item.label"
        :value="item.value"
      />
    </el-option-group>
        </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择分享班级" v-model="classShare" v-if="location=='班内分享'||location=='公开分享'">
          <el-option 
          v-for="item in userA.ManageClass" :key="item.id"
          :label="item.name" :value="item.name" />
        </el-select>
           <el-select placeholder="请选择分组" v-model="category" v-if="location">
          <el-option 
          v-for="item in selectArr"
          :label="item.label" :value="item.value" />
        </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="SubmitShare(item)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>

  </div>
</template>

<script setup>

import { ref, onMounted,computed,watch,defineEmits} from 'vue'
import {ShareUser,ShareComm,setAddLike,setAddComment,getShareComm,setDelComment,delShareA,getUser,getSelect} from '../api/index'

const props = defineProps({
  type: {
    type: String,
  },
  Share: {
    type: Object,
  },
});

//重新调用获取数据的接口 子传父
const emit = defineEmits(['custom-event', 'custom-event1', 'custom-event2']);

//社区
const StateInit=async()=>{
const res=await getShareComm()
console.log(res)
emit('custom-event',res.data.data)
}

let GloaId=ref()

//个人公开
const StateInfo=async()=>{
  if(props.type=='1'){
    const res=await getUser(userA.id)
    console.log(res)
    emit('custom-event1',res.data.data)
  }
  else{
    const res=await ShareUser(GloaId.value)
    console.log(res)
    emit('custom-event1',res.data.data)
  }
   
    
}

//班级
const StateClass = async () => {
  console.log('获取班级信息')
  // const res=await getUser()
  // emit('custom-event2',res.data.data)
}

//获取本地存储的用户信息
let user = localStorage.getItem("user");
let userA = JSON.parse(user);

let position=ref() //分享位置
let location=ref('') //选择的分享位置
let category=ref('全部') //选择的活动类别
let classShare=ref('') //选择的班级


//活动类别
let selectArr=ref()


const switchingdata = (item) => { //停止播放
  item.play = !item.play;
};


const PopUpBox = (item) => { //弹出评论框
  item.isShow = !item.isShow;
};

//提交评论
const AddRate = ref(0);
const AddComment = ref("");
const submit = async (item) => {
  if (!AddComment.value) { //输入框非空
    ElMessage({  //非空提示
      message: '请输入评论内容',
      type: 'warning',
    })
  } else if (AddRate.value == 0) { //评分非空
    ElMessage({ //评分非空提示
      message: '请打分',
      type: 'warning',
    })
  } else {
    //非空完成 调接口
    let res = await setAddComment({
      id: item.id,
      RwId:item.commentList[item.commentList.length-1]? item.commentList[item.commentList.length-1].RwId+=1:1001,
      fromId: userA.id,
      fromName: userA.nickname,
      rate: AddRate.value,
      comment: AddComment.value,
      type: props.type
    })
    if (res.data.code == '0') {
      if(props.type=='6'){
      StateInit()
    }else if(props.type=='1'){
      StateInfo()
  }else if(props.type=='4'||props.type=='5'){
      StateClass()
    } 
      console.log(res)
      AddRate.value = 0;
      AddComment.value = "";
      item.isShow = false
    }

  }
};


const delCommit=async(item1,id)=>{ //删除评论
  console.log('删除评论')
  let res=await setDelComment(id,item1.RwId,props.type)
  if(res.data.code=='0'){
    console.log(res)
    if(props.type=='6'){
      StateInit()
    }else if(props.type=='1'){
      StateInfo()
  }else if(props.type=='4'||props.type=='5'){
      StateClass()
    }
}
}


const delShare=async(item)=>{ //删除乐谱
  console.log('删除乐谱')
  let res=await delShareA(item.id,props.type)
  if(res.data.code=='0'){
    console.log(res)
    StateInfo()
  }
}

//分享

watch(()=>location.value,async()=>{
    console.log(location.value)
    //获取分类类别
let res=await getSelect(location.value)
  console.log(res)
  if(res.data.code==0){
    selectArr.value=res.data.data
  }
})

let dialogFormVisible=ref(false)
const Sharea=async(item)=>{

  //下拉菜单展示
  if(props.type=='3'){
    console.log(1111)
    if (userA.subject) {
      console.log('老师')
      position.value = [
        {
          label: '班级',
          options: [{ id: 3001, value: "公开分享", label: "公开分享" }, { id: 3002, value: "班内分享", label: "班内分享" },]
        },
        { label: '社区', options: [{ id: 3003, value: "社区分享", label: "社区分享" },] },
        { label: '个人', options: [{ id: 4004, value: "个人公开", label: "个人公开" }] }]
      dialogFormVisible.value = true
    }
    else {
      console.log('学生或管理员')
      let data = {
        ...item,
        type: category.value,
        like: 0,
        comment: 0,
        commentList: []
      }
      let res = await ShareUser(data);
      console.log(res)
      if (res.data.code == '0') {
        ElMessage({
          message: '分享成功',
          type: 'success',
        })
      }
    }
  } else if (props.type == '6') {
    position.value = [
      {
        label: '班级',
        options: [
          { id: 3001, value: "公开分享", label: "公开分享" },
          { id: 3002, value: "班内分享", label: "班内分享" },
        ]
      }
    ]
    dialogFormVisible.value = true
  } else if (props.type == '4' || props.type == '5') {
    position.value = [
      {
        label: '社区',
        options: [
          { id: 3003, value: "社区分享", label: "社区分享" },
        ]
      }
    ]
  } else if (props.type == '1') {
    position.value = [
      { label: '班级', options: [{ id: 3001, value: "公开分享", label: "公开分享" }, { id: 3002, value: "班内分享", label: "班内分享" },] },
      { label: '社区', options: [{ id: 3003, value: "社区分享", label: "社区分享" },] },]
    console.log(position.value)
    dialogFormVisible.value = true
  }
}


const SubmitShare=async(item)=>{ //老师提交分享
    if(location.value=='社区分享'){ 
    let res=await ShareComm({
    ...item,
    type:category.value,
    time:new Date().toISOString().split('T')[0],
    teacher:userA.nickname, //分享老师
    like:0,
    comment:0,
    commentList:[],
    SharePotion:classShare.value ?location.value +'-'+classShare.value +'-'+category.value:location.value+'-'+category.value,   //分享位置
    ShareTime:new Date().toISOString().split('T')[0], //分享时间
   })
   if(res.data.code=='0'){
    ElMessage({
    message: '分享成功',
    type: 'success',
  })
   }
   console.log(res)
    }else if(location.value=="个人公开"){
        console.log('分享个人公开')
        let data={
        ...item,
        type:category.value,
        like:0,
        comment:0,
        commentList:[]
     }
     let res=await ShareUser(data);
     console.log(res)
     if(res.data.code=='0'){
        ElMessage({
    message: '分享成功',
    type: 'success',
  })
     }
    }else if(location.value=='公开分享'||location.value=='班内分享'){
      console.log('分享个人公开')
        let data={
        ...item,
        type:category.value,
        like:0,
        classShare:classShare.value,
        comment:0,
        posiA:location.value=='公开分享'?'1':'2',  //1为公开分享 2为班内分享
        commentList:[],
        SharePotion:classShare.value ?location.value +'-'+classShare.value +'-'+category.value:location.value+'-'+category.value,   //分享位置
    ShareTime:new Date().toISOString().split('T')[0], //分享时间
    teacher:userA.nickname, //分享老师
     }
     let res=await ShareUser(data);
     console.log(res)
     if(res.data.code=='0'){
        ElMessage({
    message: '分享成功',
    type: 'success',
  })
     }
    }
    dialogFormVisible.value = false
  position.value = []
  location.value = ''
  category.value = '全部'
  classShare.value = ''
  }





const addLike=async(item)=>{ //点赞
   console.log(item)
   let res=await setAddLike({
    id:item.id,
    like:item.like,
    fromId:userA.id,
    type:props.type
   })
   if(res.data.code=='0'){
    if(props.type=='6'){
      StateInit()
    }else if(props.type=='1'){
      StateInfo()
  }else if(props.type=='4'||props.type=='5'){
      StateClass()
    }
   }else{
    if(props.type=='6'){
      StateInit()
    }else if(props.type=='1'){
      StateInfo()
  }else if(props.type=='4'||props.type=='5'){
      StateClass()
    }
   }
   
}

const UserDetail=(item)=>{ //用户详情
  console.log(item)
  GloaId.value=item.userId
  const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
  window.open(`${baseUrl}/PersonalPage/${item.userId}`, '_blank')
}

</script>


<style scoped src="../assets/interaction.css">

</style>